<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm ref="form" :fieldList="fieldList" :formData="form"></XForm>
      </template>
      <template #toolbar_btns>
        <el-button type="primary" @click="onRetryBatch">批量重试</el-button>
      </template>
    </VTable>
  </VPage>

  <el-dialog v-model="dialogVisible" title="异常信息" width="1200" :before-close="handleClose">
    <div>{{ exception }}</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { failedJobList, failedJobRetry, failedJobDelete } from "./api.js"
import { ElMessage, ElMessageBox } from "element-plus"
import { onMounted, ref, toRefs } from "vue"
import XForm from "@/components/XForm/index.vue"

const tableRef = ref()
// 获取已选中的行
const getSelectRow = () => {
  const getCheckboxRecords = tableRef?.value.$table.getCheckboxRecords()
  if (!getCheckboxRecords.length) {
    ElMessage({ showClose: true, message: "请至少选择一条数据！", type: "warning" })
    return false
  }
  return getCheckboxRecords?.map((v) => v.id)
}
const dialogVisible = ref(false)
const exception = ref("")
const openException = (value) => {
  exception.value = value
  dialogVisible.value = true
}
const handleClose = () => {
  dialogVisible.value = false
  exception.value = ""
}
// 查询
const query = () => {
  tableRef?.value.query()
}
// 枚举 数据
const originOption = ref({})
// 搜索条件 配置
const publicStyle = { style: { width: "200px" } }
const fieldList = ref([
  { field: "uuid", placeholder: "UUID", ...publicStyle },
  { field: "queue", placeholder: "队列名称", ...publicStyle },
  { field: "payload", placeholder: "payload", ...publicStyle },
  { label: "失败时间", field: "failed_at", type: "dateTimeRangeNorm" },
])
//获取下拉数据
onMounted(async () => {})
// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  showOverflow: false,
  columns: [
    { type: "checkbox", fixed: "left", width: 40 },
    { field: "uuid", title: "UUID" },
    { field: "connection", title: "连接驱动", width: 120 },

    { field: "queue", title: "队列名称" },

    {
      field: "payload",
      title: "payload",
      width: 180,
      slots: {
        default: ({ row }) => <VText value={JSON.stringify(row.payload)} line={1} onClick={() => openException(JSON.stringify(row.payload))} />,
      },
    },
    {
      field: "exception",
      title: "异常信息",
      width: 200,
      slots: {
        default: ({ row }) => <VText value={row.exception} line={1} onClick={() => openException(row.exception)} />,
      },
    },
    { field: "failed_at", title: "失败时间", width: 180 },
    {
      title: "操作",
      width: 100,
      fixed: "right",
      slots: {
        default: ({ row }) => {
          return [
            <div>
              <el-button link type="primary" onClick={() => onRetry(row)}>
                重试
              </el-button>

              <el-button link type="danger" onClick={() => onDelete(row)}>
                删除
              </el-button>
            </div>,
          ]
        },
      },
    },
  ],
  pagerConfig: {
    // layouts: ["Home", "PrevJump", "PrevPage", "Number", "JumpNumber", "NextPage", "NextJump", "End", "Sizes", "Jump", "FullJump", "PageCount", "Total"],
    layouts: ["Home", "PrevPage", "Number", "NextPage", "End", "Sizes"],
  },
  proxyConfig: {
    ajax: {
      query: async ({ page, form }) => {
        let params = {
          ...initForm(form),
          page: page.pageNum,
          page_size: page.pageSize,
        }
        let res = await failedJobList(params)
        res.total = 9999
        return res
      },
    },
  },
})
// 组装查询条件
const initForm = (form) => {
  if (form.failed_at && form.failed_at.length) {
    form.failed_at = {
      start: form.failed_at?.[0] || "",
      end: form.failed_at?.[1] || "",
    }
  }

  return form
}

const onRetry = (row) => {
  failedJobRetry({ uuid: [row.uuid] }).then((res) => {
    ElMessage.success("操作成功")
    query()
  })
}
const onRetryBatch = () => {
  let rows = tableRef?.value.$table.getCheckboxRecords()
  failedJobRetry({ uuid: rows.map((v) => v.uuid) }).then((res) => {
    ElMessage.success("操作成功")
    query()
  })
}

const onDelete = (row) => {
  failedJobDelete({ uuid: row.uuid }).then((res) => {
    ElMessage.success("操作成功")
    query()
  })
}
</script>
<style lang="scss" scoped></style>
